<template>
	<div>
  	<div class="modal-dialog">
  		<div class="modal-content">
  			<img class="img" src="../../static/images/loginicon.jpg">
  			<div class="content-text">
  				<p class="little-tip">网选城</p>
  				<p class="little-content">好宝贝轻松易得，好生活天天享受。</p>
  				<p class="little-content">共赢网上商城之路，期待您携手同行！</p>
  			</div>
  		</div>
  		<div class="modal-footer">
        <button class="left" @click="close">取消</button>
  			<button open-type="getUserInfo" lang="zh_CN" class="btn" @getuserinfo="login">
          授权登录
        </button>
  		</div>
  	</div>
	</div>
</template>

<script>
	import config from "@/config"
  import showSuccess from "@/util"
  import {get,post} from '@/util'
	import qcloud from "wafer2-client-sdk"
	export default {
		methods:{
      data () {
        return {
          info:'',
        }
      },
			login(){
        var that =this 
				qcloud.setLoginUrl(config.loginUrl);
				qcloud.login({
				    success: userInfo => {
				        console.log('登录成功', userInfo);
                this.info=userInfo
                that.postInfo()
				        wx.setStorageSync('userinfo', userInfo)
				        this.$emit("changeShow",false,userInfo) //子组件向父组件传值
				        wx.showTabBar()
				    },
				    fail: err => {
                console.log('拒绝授权');
				        console.log(err);
				    }
				});
			},
      close(){
        this.$emit("changeShow",false)
        wx.showTabBar()
      },
      async postInfo(){
        const data = await post('/app/user/userInfo', {
          user_id: this.info.openId,
          user_name:this.info.nickName,
          user_head:this.info.avatarUrl
        })
        
      },
		},
	}
</script>

<style lang="scss">
.modal-dialog {
  box-sizing: border-box;
  width: 580rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  background: #fff;
  margin: -150rpx 95rpx;
  border-radius: 16rpx;
}
.modal-content {
  box-sizing: border-box;

  display: flex;
  padding: 0rpx 53rpx 50rpx 53rpx;
  font-size: 32rpx;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.content-tip {
  text-align: center;
  font-size: 36rpx;
  color: #333333;
}
.content-text {
  height:130px;
  padding:10px 0px 50px 0px;
  font-size:14px;
}
.modal-footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  font-size: 16px;
  font-weight:bold;
  height: 45px;
  line-height: 45px;
  text-align: center;
  
  .left{
    flex:1;
    font-weight:bold;
    line-height:45px;
    margin-right:10px;
  }
  .btn {
    flex:1;
    font-weight:bold;
    line-height:45px;

  }
}

.img {
  width: 580rpx;
  height:150px;
}
.little-tip {
  padding-top:15px;
  padding-bottom:3px;
  font-size: 20px;
  font-weight:bold;
  color: #1296db;
}
.little-content {
  padding-top:5px;
  font-size: 15px;
  color:#606060;
}
.key-bold {
  padding-top:5px;
  font-size: 16px;
  font-weight:bold;
}
	
</style>